<template>
    <ph-form>
          <ph-blockquote
            >表单主题色:theme&lt;dark|light|primary|success|danger|warning&gt;></ph-blockquote
          >
          <ph-form-datetime
            type="date"
            label="默认dark"
            style="min-width: 290px"
            v-model="date"
          />
          <ph-form-datetime
            type="date"
            label="light"
            theme="light"
            style="min-width: 290px"
            v-model="date"
          />
          <ph-form-datetime
            type="datetime"
            label="primary"
            theme="primary"
            style="min-width: 290px"
            v-model="datetime"
          />
          <ph-form-datetime
            type="month"
            label="success"
            theme="success"
            style="min-width: 290px"
            v-model="yearmonth"
          />
          <ph-form-datetime
            type="year"
            label="danger"
            theme="danger"
            style="min-width: 290px"
            v-model="year"
          />
          <ph-form-datetime
            type="time"
            label="warning"
            theme="warning"
            style="min-width: 290px"
            v-model="time"
          />
          <ph-divider>联动时间 <br/>min:1992-09-20 <br/>max:1996-12-20</ph-divider>
          <ph-form-datetime-cascade
            label="联动时间"
            type="date"
            min="1992-09-20"
            max="1996-12-20"
            v-model="cascadeDate"
          />
          <ph-divider>表单datetime {{ datetime }}</ph-divider>
          <ph-form-datetime
            style="min-width: 290px"
            v-model="datetime"
            
          />
          <ph-blockquote type="primary">
            表单datetime 限定范围
            <br />
            min="1991-09-20 12:03:34" max="1993-09-20 12:03:34"
          </ph-blockquote>
          <ph-form-datetime
            style="min-width: 290px"
            min="1991-09-20 12:03:34"
            max="1993-09-20 12:03:34"
            v-model="datetime"
            
          />

          <ph-divider>表单date {{ date }}</ph-divider>
          <ph-form-datetime
            type="date"
            style="min-width: 290px"
            v-model="date"
            
          />
          <ph-blockquote type="primary">
            date 限定范围
            <br />
            min="1993-09-5" max="1993-09-23"
          </ph-blockquote>
          <ph-form-datetime
            type="date"
            style="min-width: 290px"
            value="1993-09-10"
            min="1993-09-8"
            max="1993-09-23"
            
          />

          <ph-divider>表单year {{ year }}</ph-divider>
          <ph-form-datetime
            type="year"
            style="min-width: 290px"
            v-model="year"
            
          />
          <ph-blockquote type="primary">
            year 限定范围
            <br />
            min="1991" max="1993"
          </ph-blockquote>
          <ph-form-datetime
            type="year"
            style="min-width: 290px"
            v-model="year"
            min="1991"
            max="1993"
            
          />

          <ph-divider>表单year-month {{ yearmonth }}</ph-divider>
          <ph-form-datetime
            type="month"
            style="min-width: 290px"
            v-model="yearmonth"
            
          />
          <ph-blockquote type="primary">
            month 限定范围
            <br />
            min="1991-06" max="1995-09"
          </ph-blockquote>
          <ph-form-datetime
            type="month"
            style="min-width: 290px"
            v-model="yearmonth"
            min="1991-06"
            max="1995-09"
            
          />

          <ph-divider>表单time {{ time }}</ph-divider>
          <ph-form-datetime
            type="time"
            style="min-width: 290px"
            v-model="time"
            
          />
          <ph-blockquote type="primary">
            time 限定范围
            <br />
            min="6:30:34" max="18:00:34"
          </ph-blockquote>
          <ph-form-datetime
            type="time"
            style="min-width: 290px"
            v-model="time"
            min="6:30:34"
            max="18:00:34"
            
          />

          <ph-divider>自定义表单time格式 {{ time }}</ph-divider>
          <ph-form-datetime
            type="time"
            style="min-width: 290px"
            v-model="time1"
            format="hh时mm分ss秒"
            
          />
          <ph-blockquote type="primary">
            time 限定范围
            <br />
            min="6时30分34秒" max="18时00分34秒"
          </ph-blockquote>
          <ph-form-datetime
            type="time"
            style="min-width: 290px"
            v-model="time1"
            min="6时30分34秒"
            max="18时00分34秒"
            format="hh时mm分ss秒"
            
          />

          <ph-divider
            >并列日期范围min="6:30:34" max="18:00:34" value:{{
              time
            }}</ph-divider
          >
          <ph-form-datetime-range
            v-model="timerange"
            min="6:30:34"
            max="18:00:34"
            type="time"
          />
          <ph-divider
            >并列日期范围min="6:30:34" max="18:00:34" value:{{
              time
            }}</ph-divider
          >
          <ph-form-datetime-cascade
            v-model="timerange"
            min="6:30:34"
            max="18:00:34"
            type="time"
          />

          <ph-divider>表单禁止 {{ datetime }}</ph-divider>
          <ph-form-datetime
            style="min-width: 290px"
            v-model="datetime"
            :disabled="true"
            
          />

          <ph-divider
            >weekText 自定义周文字
            :weekText="['Su','Mo','Tu','We','Th','Fr','Sa']"</ph-divider
          >
          <ph-form-datetime
            type="date"
            label="weekText"
            style="min-width: 290px"
            :weekText="['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']"
          />
          <ph-divider
            >importants自定义重要日子
            :importants="[{title:'工资',md:'*-20'},{title:'浪',md:'*-9',desc:'去三里屯浪'}]"</ph-divider
          >
          <ph-form-datetime
            type="date"
            label="importants"
            style="min-width: 290px"
            :importants="[
              { title: '工资', md: '*-20' },
              { title: '浪', md: '*-9', desc: '去三里屯浪' },
            ]"
          />
          <ph-divider>clear 关闭清除按钮</ph-divider>
          <ph-form-datetime
            type="date"
            label="clear"
            style="min-width: 290px"
            :clear="false"
            v-model="datetime"
            
          />
          <ph-divider>now 关闭现在按钮选项</ph-divider>
          <ph-form-datetime
            type="date"
            label="now"
            style="min-width: 290px"
            :now="false"
            v-model="datetime"
          />

          

          <ph-blockquote
            >datetime双向关联min="1992-09-20 06:00:00" max="1996-12-20 06:00:00"
            start="1992-09-21 06:00:00"</ph-blockquote
          >
          <ph-form-datetime-cascade
            label="在世时间"
            min="1992-09-20 06:00:00"
            max="1996-12-20 06:00:00"
            v-model="lifetime"
          />
        </ph-form>
</template>
<script lang="ts" setup>
import { 
    PhForm,
    PhValidator,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhBlockquote,
    PhDivider
} from '@/components'
import { ref } from 'vue'
const lifetime = ref(['1992-09-21 06:00:00'])
const datetime = ref('1993-09-21 06:00:00')
const date = ref('1993-09-21')
const cascadeDate = ref(['1993-09-20'])
const yearmonth = ref('1993-09')
const year = ref("1993")
const time = ref('12:00:00')
const time1 = ref('12时18分15秒')
const timerange = ref([])
</script>